<template>
	<view class="right-operate uv-flex-row">
		<view class="item btn-hover uv-flex-row" @click="onClick('lastCourse')" v-if="course">
			<btn-rhombus>
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
					<path class="btn-hover-icon"
						d="M23.3083 11.3236L10.4623 3.20181C10.3409 3.12504 10.2012 3.08225 10.0576 3.07788C9.91411 3.07352 9.77204 3.10776 9.64624 3.17701C9.52044 3.24627 9.41553 3.34801 9.34246 3.47163C9.26938 3.59525 9.23081 3.73621 9.23077 3.87981V20.1226C9.23116 20.266 9.26994 20.4068 9.34307 20.5302C9.4162 20.6537 9.52103 20.7553 9.64668 20.8245C9.77233 20.8938 9.91423 20.9281 10.0576 20.9241C10.2011 20.92 10.3408 20.8776 10.4623 20.8013L23.309 12.6826C23.4234 12.6099 23.5177 12.5094 23.5829 12.3906C23.6481 12.2718 23.6823 12.1384 23.6822 12.0029C23.6822 11.8673 23.6478 11.7339 23.5825 11.6152C23.5171 11.4964 23.4228 11.3961 23.3083 11.3236Z"
						fill="#7F7FB2" />
					<rect class="btn-hover-icon" x="1.84616" y="2.76923" width="2.76923" height="18.4615" fill="#7F7FB2" />
				</svg>
			</btn-rhombus>
			<text class="btn-hover-text">上次学习：{{course.name}}</text>
		</view>
		<view class="item btn-hover uv-flex-row" @click="onClick('addChapter')">
			<btn-rhombus>
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
					<path class="btn-hover-icon" fill-rule="evenodd" clip-rule="evenodd" d="M14 10V0H10V10L0 10V14L10 14V24H14V14L24 14V10L14 10Z" fill="#7F7FB2" />
				</svg>
			</btn-rhombus>
			<text class="btn-hover-text">添加课程包</text>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			course: {
				type: [Object, null],
				default: null
			}
		},
		methods: {
			onClick(type) {
				this.$emit(type);
				switch (type) {
					case 'lastCourse':
						getApp().globalData.setdzdata('courseItem', this.course);
						getApp().globalData.setdzdata('lastActive', this.course);
						uni.$uv.route({
							url: '/learning',
							params: {
								id: this.course.courseId
							}
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	.right-operate {
		position: fixed;
		z-index: 10;
		right: 45px;
		bottom: 70px;
		.item {
			align-items: center;
			margin: 0 0 0 60px;
			text {
				white-space: nowrap;
				margin-left: 8px;
				font-size: 20px;
				color: #fff;
			}
		}
	}
	@media screen and (max-width: 1600px) {
		.right-operate {
			right: 30px;
			bottom: 50px;
		}
		.right-operate .item {
			margin-left: 30px;
		}
		.right-operate .item text {
			font-size: 16px;
		}
	}
	@media screen and (max-width: 1400px) {
		.right-operate {
			right: 10px;
		}
		.right-operate .item text {
			font-size: 14px;
		}
	}
	@media screen and (max-width: 1200px) {
		.right-operate .item text {
			font-size: 12px;
		}
	}
</style>